<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <!-- 假如我们自定义一个指令叫v-big，作用和v-text功能类似，但是会把绑定的数值放大十倍 -->
       <!-- 再做一个v-fc指令，和v-bind类似，但是让让其绑定的input元素默认获得焦点 -->
       <!-- 指令语法，用于解析标签包括标签属性、标签体内容、绑定事件等等 -->
       <h2>当前n值是<span v-text="n"></span></h2>
       <h2>放大十倍是<span v-big-number="n"></span></h2>
       <button @click="n++">点我n加一</button>

       <hr>
       <hr>
       <input type="text" v-fc>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // 创建全局自定义指令
    Vue.directive('fc',{
                // 当指令与元素成功绑定时使用，绑定不代表元素已经加载了哦
                bind(a){
                    console.log(a)
                },
                // 指令所在元素被插入页面时
                inserted(a){
                    // 这样写就完美的弄上焦点了！
                    a.focus()
                },
                // 指令所在模板被重新解析时
                update(){

                }
            })

    Vue.directive('big',function(a,b){
        a.innerText = b.value*10;
    })
    // 下面两个局部指令我已经注释掉了，两个指令依旧在使用，就是因为全局指令


    const vm = new Vue({
        el:'#root',
        data:{
           n:1
        },
        // 定义指令的配置项
        directives:{
            // 指定可以写成一个对象，也可以写成一个函数，他们有一些区别，v-后面的才是指令名，比如v-text的指令名是text
            // big何时会被调用，1.元素与指令成功绑定时2.指定所在的模板被重新解析时
            // big(a,b){
            //     // a是作用的element元素，b是指令的一些信息，叫绑定
            //     a.innerText = b.value*10;
            // },
            // 因为指令名就算有大写也会变成小写，所有多个单词一般用-连接，但是连接后指令名要被引号抱起来，比如下面这个
            'big-number'(a,b){
                a.innerText = b.value*10;
                // 这两个big是一样的指令，我换成下面这个一样的使用，功能一样
            },
            //     fc(a){
            //          直接写不行，因为，input还没有生成，当然下面这种写法也是个笑话，我写着玩的，为了绑定fc不能写成函数了
            //         setTimeout(() => {
            //             a. focus();
            //         }, 1000);
            // }
            // fc:{
            //     // 当指令与元素成功绑定时使用，绑定不代表元素已经加载了哦
            //     bind(a){
            //         console.log(a)
            //     },
            //     // 指令所在元素被插入页面时
            //     inserted(a){
            //         // 这样写就完美的弄上焦点了！
            //         a.focus()
            //     },
            //     // 指令所在模板被重新解析时
            //     update(){

            //     }
            // }
        }
    })
    // 指令函数里面的this不是vue对象，是window
</script>
</html>